<template>
    <!--柱状图-->
    <div style="width: 100%; height: 100%;" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request";

export default {
    name: "ColumnChart",
    data() {
        return {
            xAxis: [],
            chart: null // 添加 chart 属性
        };
    },
    mounted() {
        this.getData();
        window.addEventListener("resize", this.resizeChart);
    },
    methods: {
        handleResize() {
            this.chart.resize();
        },
        async getData() {
            const { data: res } = await request.get("/views/topBorrowedMajors");
            const data = res;
            const counts = data.map((item) => item.value);
            const majors = data.map((item) => item.major);
            this.echartsInit(majors, counts);
        },
        echartsInit(majors, counts) {
            this.chart = echarts.init(this.$refs.chart, null, {
                responsive: true, // 启用响应式布局
            });
            this.chart.setOption({
                title: {
                    text: "借阅量最多的十个专业",
                    textStyle: {
                        //文字颜色
                        color: "#fff",
                    },
                    left: "center",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                xAxis: {
                    show: true,
                    type: "category",
                    data: majors,
                    axisLabel: {
                        rotate: 45, // 旋转45度
                        fontSize: 14 // 设置字体大小
                    }
                },
                yAxis: {
                    type: "value",
                    name: "借阅量",
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        data: counts,
                        type: "bar",
                        itemStyle: {
                            color:new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: 'rgba(82,180,249,0.35)'},
                                    {offset: 0, color: 'rgba(82,180,249,1)'}
                                ]
                            )
                        },
                        barWidth: "30%",

                    },

                ],
            });
        },
        resizeChart() {
            this.chart.resize();
        },
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.resizeChart);
    },
};
</script>

<style scoped></style>
